<template>
	<view class="container">
		<u-navbar
			backIconColor="#FFFFFF"
			:background="{background: 'linear-gradient(90deg,#615CED,#8286F2)'}"
			:border-bottom="false"
			title="签字确认"
			titleColor="#FFFFFF"
			height="88">
		</u-navbar>

		<view class="title-box">
			<view class="title">请考官签字</view>
		</view>

		<view class="canvas-box">
			<canvas
				class="canvas"
				canvas-id="canvas"
				@touchstart="touchstart"
				@touchmove="touchmove"
				@touchend="touchend">
			</canvas>
		</view>

		<view class="btn-box">
			<view class="btn" @click="confirm">确定</view>
			<view class="btn" @click="reset">清屏</view>
			<view class="btn" @click="cancel">取消</view>
		</view>
	</view>
</template>

<script>
import { pathToBase64 } from '../../components/image-tools/index.js'
export default {
	data() {
		return {
			id: '',
			SystemInfo: {},
			ctx: '',
			points: [],
			tempPoint: []
		}
	},
	onLoad(option) {
		let that = this;
		that.id = option?.id || '';
		that.ctx = uni.createCanvasContext('canvas', that);
		that.ctx.lineWidth = 4;
		that.ctx.lineCap = 'round';
		that.ctx.lineJoin = 'round';
		that.SystemInfo = uni.getSystemInfoSync();
		that.ctx.setFillStyle('#FFFFFF');
		that.ctx.fillRect(0, 0, that.SystemInfo.windowWidth, that.SystemInfo.windowHeight);
	},
	methods: {
		confirm() {
			if (this.tempPoint.length == 0) {
				uni.showToast({
					title: '请先签名...',
					icon: 'none',
					duration: 2000
				})
				return
			}
			let that = this;
			uni.canvasToTempFilePath({
				canvasId: 'canvas',
				async success(res) {
					let tempPath = res.tempFilePath;
					let image = await pathToBase64(tempPath);
					that.sign(image);
				},
				fail(err) {
					uni.showToast({
						title: JSON.stringify(err),
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		sign(image) {
			let that = this;
			const systemInfo = uni.getSystemInfoSync();
			uni.request({
				url: `${that.$api.baseUrl}${that.$api.sign}`,
				method: 'POST',
				timeout: 30000,
				data: {
					id: that.id,
					image: image,
					device_id: systemInfo.deviceId
				},
				header: {
					'authtoken': that.$auth.token(that.$api.sign)
				},
				success(res) {
					if (res.data?.code == 1) {
						uni.$emit('sign', that.id);
						uni.showToast({
							title: res.data?.msg || '签字确认完成',
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 3
							})
						}, 1000);
					} else {
						uni.showToast({
							title: res.data?.msg || '签字确认失败',
							icon: 'none'
						});
					}
				},
				fail(err) {
					uni.showToast({
						title: '签字确认失败',
						icon: 'none'
					})
				}
			})
		},
		reset() {
			let that = this;
			uni.getSystemInfo({
				success(res) {
					that.ctx.clearRect(0, 0, res.windowWidth, res.windowHeight);
					that.ctx.setFillStyle('#FFFFFF');
					that.ctx.fillRect(0, 0, that.SystemInfo.windowWidth, that.SystemInfo.windowHeight);
					that.ctx.draw(true);
					that.tempPoint = [];
				}
			})
		},
		cancel() {
			uni.navigateBack();
		},
		touchstart(e) {
			let startX = e.changedTouches[0].x;
			let startY = e.changedTouches[0].y;
			let startPoint = {
				X: startX,
				Y: startY
			};
			this.points.push(startPoint);
			this.ctx.beginPath();
		},
		touchmove(e) {
			let moveX = e.changedTouches[0].x;
			let moveY = e.changedTouches[0].y;
			let movePoint = {
				X: moveX,
				Y: moveY
			};
			this.points.push(movePoint);
			let len = this.points.length;
			if (len >= 2) {
				this.draw();
			}
			this.tempPoint.push(movePoint);
		},
		touchend() {
			this.points = [];
		},
		draw() {
			let p0 = this.points[0];
			let p1 = this.points[1];
			this.points.shift();
			this.ctx.moveTo(p0.X, p0.Y);
			this.ctx.lineTo(p1.X, p1.Y);
			this.ctx.stroke();
			this.ctx.draw(true);
		}
	}
}
</script>

<style lang="scss" scoped>
page {
	width: 100%;
	height: 100%;
}

.container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
	.title-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
		.title {
			font-size: 56rpx;
			line-height: 56rpx;
			font-weight: bold;
			color: #333333;
		}
		
	}
	.canvas-box {
		flex: 1;
		display: flex;
		width: 100%;
		z-index: 100;
		padding: 10rpx 20rpx;
		.canvas {
			width: 100%;
			height: 100%;
			border: 2rpx solid #666666;
			background-color: #FFFFFF;
		}
	}
	
	.btn-box {
		width: 100%;
		height: 126rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		padding: 0 20rpx;
		.btn {
			width: 178rpx;
			height: 66rpx;
			border: 2rpx solid #615CED;
			border-radius: 20rpx;
			text-align: center;
			line-height: 66rpx;
			font-size: 28rpx;
			color: #615CED;
		}
	}
}
</style>
